React Error Boundary Tree: Hierarchische Fehlerbehandlung für robuste Anwendungen

Die komponentengesteuerte Architektur von React fördert die Wiederverwendbarkeit und Wartbarkeit, birgt aber auch das Potenzial, dass sich Fehler ausbreiten und die gesamte Anwendung stören. Unbehandelte Fehler können zu einer irritierenden Erfahrung für Benutzer führen, indem kryptische Meldungen angezeigt werden oder die Anwendung sogar abstürzt. Error Boundaries bieten einen Mechanismus, um JavaScript-Fehler überall in ihrem Kindkomponentenbaum abzufangen, diese Fehler zu protokollieren und eine Fallback-UI anstelle des abgestürzten Komponentenbaums anzuzeigen. Ein gut gestalteter Error Boundary Tree ermöglicht es Ihnen, Fehler zu isolieren und eine bessere Benutzererfahrung zu bieten, indem Sie bestimmte Abschnitte Ihrer Anwendung elegant verschlechtern, ohne andere zu beeinträchtigen.

Grundlegendes zu React Error Boundaries

Error Boundaries, die in React 16 eingeführt wurden, sind React-Komponenten, die JavaScript-Fehler überall in ihrem Kindkomponentenbaum abfangen, diese Fehler protokollieren und eine Fallback-UI anstelle des abgestürzten Komponentenbaums anzeigen. Error Boundaries fangen Fehler während des Renderings, in Lifecycle-Methoden und in Konstruktoren des gesamten Baums unterhalb von ihnen ab. Entscheidend ist, dass sie *keine* Fehler abfangen für:

• Event-Handler (mehr dazu weiter unten)
• Asynchroner Code (z. B. setTimeout- oder requestAnimationFrame-Callbacks)
• Serverseitiges Rendering
• Fehler, die in der Error Boundary selbst ausgelöst werden (und nicht in ihren Kindern)

Eine Klassenkomponente wird zu einer Error Boundary, wenn sie entweder (oder beide) dieser Lifecycle-Methoden definiert:

• static getDerivedStateFromError(): Diese Methode wird aufgerufen, nachdem eine Nachkommenkomponente einen Fehler ausgelöst hat. Sie empfängt den ausgelösten Fehler als Argument und sollte einen Wert zurückgeben, um den Status zu aktualisieren.
• componentDidCatch(): Diese Methode wird aufgerufen, nachdem eine Nachkommenkomponente einen Fehler ausgelöst hat. Sie empfängt zwei Argumente:
  • error: Der ausgelöste Fehler.
  • info: Ein Objekt, das Informationen darüber enthält, welche Komponente den Fehler ausgelöst hat.

Ein einfaches Error Boundary-Beispiel

Hier ist eine einfache Error Boundary-Komponente:

            
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    console.error("Caught an error: ", error, info.componentStack);
    //logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

            

              
                Copy
              
            
          

Verwendung:

            
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

            

              
                Copy
              
            
          

Die Macht des Error Boundary Tree

Während eine einzelne Error Boundary Ihre gesamte Anwendung schützen kann, beinhaltet ein ausgefeilterer Ansatz das Erstellen eines Error Boundary *Tree*. Dies bedeutet, dass mehrere Error Boundaries strategisch auf verschiedenen Ebenen Ihrer Komponentenhierarchie platziert werden. Dies ermöglicht Ihnen Folgendes:

• Fehler isolieren: Ein Fehler in einem Teil der Anwendung führt nicht unbedingt zum Absturz der gesamten UI. Nur der Teil, der von der spezifischen Error Boundary umschlossen ist, zeigt die Fallback-UI an.
• Kontextspezifische Fallbacks bereitstellen: Verschiedene Teile Ihrer Anwendung benötigen möglicherweise unterschiedliche Fallback-UIs. Beispielsweise kann eine fehlerhafte Bildkomponente ein Platzhalterbild anzeigen, während eine fehlerhafte Datenabrufkomponente eine Schaltfläche "Wiederholen" anzeigen kann.
• Benutzererfahrung verbessern: Durch sorgfältiges Platzieren von Error Boundaries können Sie sicherstellen, dass Ihre Anwendung elegant herabgestuft wird, wodurch die Unterbrechung für den Benutzer minimiert wird.

Erstellen eines Error Boundary Tree: Ein praktisches Beispiel

Betrachten wir eine Webanwendung, die ein Benutzerprofil anzeigt. Das Profil besteht aus mehreren Abschnitten:

• Benutzerinformationen (Name, Ort, Biografie)
• Profilbild
• Letzter Aktivitätsfeed
• Liste der Follower

Wir können jeden dieser Abschnitte mit seiner eigenen Error Boundary umschließen.

            
// ErrorBoundary.js (Die generische ErrorBoundary-Komponente von oben)

import ErrorBoundary from './ErrorBoundary';

function UserProfile() {
  return (
    <div>
      <ErrorBoundary>
        <UserInfo />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<img src="/placeholder.png" alt="Placeholder"/>}>
        <ProfilePicture />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<p>Fehler beim Laden der Aktivität. Bitte versuchen Sie es später noch einmal.</p>}>
        <ActivityFeed />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<p>Follower konnten nicht geladen werden.</p>}>
        <FollowersList />
      </ErrorBoundary>
    </div>
  );
}

            

              
                Copy
              
            
          

Wenn in diesem Beispiel die ProfilePicture-Komponente nicht geladen werden kann (z. B. aufgrund einer fehlerhaften Bild-URL), zeigt nur der Profilbildbereich die Fallback-UI (das Platzhalterbild) an. Der Rest des Profils bleibt funktionsfähig. Ebenso wirkt sich ein Fehler in der ActivityFeed-Komponente nur auf diesen Abschnitt aus und zeigt die Meldung "Bitte versuchen Sie es später noch einmal" an.

Beachten Sie die Verwendung der fallbackUI-Eigenschaft in einigen der ErrorBoundary-Komponenten. Dies ermöglicht es uns, die Fallback-UI für jeden Abschnitt anzupassen und so eine kontextbezogenere und benutzerfreundlichere Erfahrung zu bieten.

Fortgeschrittene Error Boundary-Techniken

1. Anpassen der Fallback-UI

Die Standard-Fallback-UI (z. B. eine einfache Meldung "Etwas ist schiefgelaufen") ist möglicherweise nicht für alle Szenarien ausreichend. Sie können die Fallback-UI anpassen, um informativere Meldungen bereitzustellen, alternative Aktionen anzubieten oder sogar zu versuchen, den Fehler zu beheben.

Wie im vorherigen Beispiel gezeigt, können Sie Eigenschaften verwenden, um eine benutzerdefinierte Fallback-UI an die ErrorBoundary-Komponente zu übergeben:

            
<ErrorBoundary fallbackUI={<CustomFallbackComponent />}>
  <MyComponent />
</ErrorBoundary>

            

              
                Copy
              
            
          

Die CustomFallbackComponent kann eine spezifischere Fehlermeldung anzeigen, Schritte zur Fehlerbehebung vorschlagen oder eine Schaltfläche "Wiederholen" anbieten.

2. Protokollieren von Fehlern bei externen Diensten

Während Error Boundaries Anwendungsabstürze verhindern, ist es entscheidend, Fehler zu protokollieren, damit Sie zugrunde liegende Probleme identifizieren und beheben können. Die componentDidCatch-Methode ist der ideale Ort, um Fehler bei externen Fehlerverfolgungsdiensten wie Sentry, Bugsnag oder Rollbar zu protokollieren.

            
class ErrorBoundary extends React.Component {
  // ...

  componentDidCatch(error, info) {
    // Log the error to an error reporting service
    logErrorToMyService(error, info.componentStack);
  }

  // ...
}

            

              
                Copy
              
            
          

Stellen Sie sicher, dass Sie Ihren Fehlerverfolgungsdienst so konfigurieren, dass er JavaScript-Fehler behandelt und Ihnen detaillierte Informationen über den Fehler liefert, einschließlich des Komponenten-Stack-Traces.

Beispiel mit Sentry:

            
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  integrations: [new BrowserTracing()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

class ErrorBoundary extends React.Component {
  // ...

  componentDidCatch(error, info) {
    Sentry.captureException(error, { extra: info });
  }

  // ...
}

            

              
                Copy
              
            
          

3. Error Boundaries und Event-Handler

Wie bereits erwähnt, fangen Error Boundaries *keine* Fehler innerhalb von Event-Handlern ab. Dies liegt daran, dass Event-Handler asynchron außerhalb des React-Rendering-Lebenszyklus ausgeführt werden. Um Fehler in Event-Handlern zu behandeln, müssen Sie einen try...catch-Block verwenden.

            
function MyComponent() {
  const handleClick = () => {
    try {
      // Code that might throw an error
      throw new Error("Something went wrong in the event handler!");
    } catch (error) {
      console.error("Error in event handler:", error);
      // Display an error message to the user
      alert("An error occurred. Please try again.");
    }
  };

  return <button onClick={handleClick}>Click Me</button>;
}

            

              
                Copy
              
            
          

4. Error Boundaries und asynchrone Operationen

Ebenso fangen Error Boundaries keine Fehler in asynchronen Operationen wie setTimeout, setInterval oder Promises ab. Sie müssen try...catch-Blöcke innerhalb dieser asynchronen Operationen verwenden, um Fehler zu behandeln.

Beispiel mit Promises:

            
function MyComponent() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        // Process the data
        console.log(data);
      } catch (error) {
        console.error("Error fetching data:", error);
        // Display an error message to the user
        alert("Failed to fetch data. Please check your connection.");
      }
    };

    fetchData();
  }, []);

  return <div>Loading data...</div>;
}

            

              
                Copy
              
            
          

5. Wiederholen fehlgeschlagener Operationen

In einigen Fällen ist es möglicherweise möglich, eine fehlgeschlagene Operation automatisch zu wiederholen. Wenn beispielsweise eine Netzwerkanfrage aufgrund eines temporären Verbindungsproblems fehlschlägt, können Sie einen Wiederholungsmechanismus mit exponentiellem Backoff implementieren.

Sie können einen Wiederholungsmechanismus innerhalb der Fallback-UI oder innerhalb der Komponente implementieren, bei der der Fehler aufgetreten ist. Erwägen Sie die Verwendung von Bibliotheken wie axios-retry oder die Implementierung Ihrer eigenen Wiederholungslogik mithilfe von setTimeout.

Beispiel (einfache Wiederholung):

            
function RetryComponent({ onRetry }) {
  return <button onClick={onRetry}>Retry</button>;
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, info) {
    console.error("Caught an error: ", error, info.componentStack);
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null }, () => {
      //Force re-render of the component by updating state
      this.forceUpdate();
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Something went wrong.</h1>
          <p>{this.state.error?.message}</p>
          <RetryComponent onRetry={this.handleRetry} />
        </div>
      );
    }

    return this.props.children;
  }
}

            

              
                Copy
              
            
          

Best Practices für die Verwendung von Error Boundaries

• Gesamte Routen umschließen: Für Routen der obersten Ebene sollten Sie erwägen, die gesamte Route mit einer Error Boundary zu umschließen, um unerwartete Fehler abzufangen, die auftreten können. Dies bietet ein Sicherheitsnetz und verhindert, dass die gesamte Anwendung abstürzt.
• Kritische Abschnitte umschließen: Identifizieren Sie die kritischsten Abschnitte Ihrer Anwendung (z. B. den Checkout-Prozess in einer E-Commerce-Site) und umschließen Sie sie mit Error Boundaries, um sicherzustellen, dass sie widerstandsfähig gegen Fehler sind.
• Error Boundaries nicht überstrapazieren: Vermeiden Sie es, jede einzelne Komponente mit einer Error Boundary zu umschließen. Dies kann unnötigen Overhead verursachen und Ihren Code schwerer lesbar machen. Konzentrieren Sie sich auf das Umschließen von Komponenten, bei denen Fehler wahrscheinlich sind oder die für die Benutzererfahrung von entscheidender Bedeutung sind.
• Informative Fallback-UIs bereitstellen: Die Fallback-UI sollte dem Benutzer klare und hilfreiche Informationen darüber geben, was schiefgelaufen ist und was er tun kann, um das Problem zu beheben. Vermeiden Sie die Anzeige generischer Fehlermeldungen, die keinen Kontext liefern.
• Fehler gründlich protokollieren: Stellen Sie sicher, dass Sie alle von Error Boundaries abgefangenen Fehler bei einem externen Fehlerverfolgungsdienst protokollieren. Dies hilft Ihnen, zugrunde liegende Probleme schnell zu identifizieren und zu beheben.
• Testen Sie Ihre Error Boundaries: Schreiben Sie Unit-Tests und Integrationstests, um sicherzustellen, dass Ihre Error Boundaries korrekt funktionieren und die erwarteten Fehler abfangen. Simulieren Sie Fehlerbedingungen und überprüfen Sie, ob die Fallback-UI korrekt angezeigt wird.
• Globale Fehlerbehandlung in Betracht ziehen: Während Error Boundaries sich hervorragend zur Behandlung von Fehlern innerhalb von React-Komponenten eignen, sollten Sie auch die Implementierung einer globalen Fehlerbehandlung in Betracht ziehen, um Fehler abzufangen, die außerhalb des React-Baums auftreten (z. B. nicht behandelte Promise-Ablehnungen).

Globale Überlegungen und kulturelle Sensibilität

Bei der Gestaltung von Error Boundary Trees für ein globales Publikum ist es wichtig, kulturelle Sensibilität und Lokalisierung zu berücksichtigen:

• Lokalisierung: Stellen Sie sicher, dass Ihre Fallback-UIs für verschiedene Sprachen und Regionen ordnungsgemäß lokalisiert sind. Verwenden Sie eine Lokalisierungsbibliothek wie i18next oder react-intl, um Fehlermeldungen und andere Texte zu übersetzen.
• Kultureller Kontext: Achten Sie bei der Gestaltung Ihrer Fallback-UIs auf kulturelle Unterschiede. Vermeiden Sie die Verwendung von Bildern oder Symbolen, die in bestimmten Kulturen anstößig oder unangemessen sein könnten. Beispielsweise kann eine Handgeste, die in einer Kultur als positiv gilt, in einer anderen Kultur anstößig sein.
• Zeitzonen: Wenn Ihre Fehlermeldungen Zeitstempel oder andere zeitbezogene Informationen enthalten, stellen Sie sicher, dass Sie diese in der lokalen Zeitzone des Benutzers anzeigen.
• Währungen: Wenn Ihre Fehlermeldungen Geldwerte enthalten, zeigen Sie diese in der lokalen Währung des Benutzers an.
• Barrierefreiheit: Stellen Sie sicher, dass Ihre Fallback-UIs für Benutzer mit Behinderungen zugänglich sind. Verwenden Sie geeignete ARIA-Attribute und befolgen Sie die Richtlinien für Barrierefreiheit, um Ihre Anwendung für alle nutzbar zu machen.
• Opt-In für die Fehlerberichterstattung: Seien Sie transparent in Bezug auf die Fehlerberichterstattung. Geben Sie Benutzern die Möglichkeit, sich für das Senden von Fehlerberichten an Ihre Server an- oder abzumelden. Stellen Sie die Einhaltung von Datenschutzbestimmungen wie DSGVO und CCPA sicher.

Beispiel (Lokalisierung mit `i18next`):

            
// i18n.js (i18next-Konfiguration)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en/translation.json';
import fr from './locales/fr/translation.json';

i18n
  .use(initReactI18next) // gibt i18n an react-i18next weiter
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    lng: 'en', // Standardsprache
    fallbackLng: 'en',

    interpolation: {
      escapeValue: false, // react schützt bereits vor xss
    },
  });

export default i18n;

// ErrorBoundary.js

import { useTranslation } from 'react-i18next';

function ErrorBoundary(props) {
  const { t } = useTranslation();

  // ...

  render() {
    if (this.state.hasError) {
      return <h1>{t('error.somethingWentWrong')}</h1>;
    }

    return this.props.children;
  }
}

            

              
                Copy
              
            
          

Fazit

React Error Boundary Trees sind ein leistungsstarkes Werkzeug zum Erstellen robuster und widerstandsfähiger Anwendungen. Indem Sie Error Boundaries strategisch auf verschiedenen Ebenen Ihrer Komponentenhierarchie platzieren, können Sie Fehler isolieren, kontextspezifische Fallbacks bereitstellen und die allgemeine Benutzererfahrung verbessern. Denken Sie daran, Fehler in Event-Handlern und asynchronen Operationen mithilfe von try...catch-Blöcken zu behandeln. Indem Sie Best Practices befolgen und globale und kulturelle Faktoren berücksichtigen, können Sie Anwendungen erstellen, die sowohl zuverlässig als auch benutzerfreundlich für ein vielfältiges Publikum sind.

Durch die Implementierung eines gut gestalteten Error Boundary Tree und die Beachtung von Details können Sie die Zuverlässigkeit und Benutzerfreundlichkeit Ihrer React-Anwendungen erheblich verbessern, unabhängig davon, wo sich Ihre Benutzer befinden.